<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-03-29 17:27:41
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-30 17:03:07
 * @FilePath: /tea-garden-web/src/pages/base-list.vue
 * @Description: 基地列表
-->
<template>
  <div class="base-list">
    <span class="base-name">{{ baseList[0].base_name }}</span>
    <span class="base-description">{{ baseList[0].base_describe }}</span>
    <!-- <div class="base-other">
      <span class="info-item">编号: {{ baseList[0].id }}</span>
      <span class="info-item">负责人: {{ baseList[0].base_leader }}</span>
      <span class="info-item">联系方式: {{ baseList[0].base_phone }}</span>
    </div> -->
    <span class="button-enter-base" @click="handleClickButton">进入茶园</span>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('base-list', ['baseList'])
  },
  methods: {
    ...mapActions('base-list', ['getBaseList']),
    ...mapActions('base-overview', ['getAllEquipment', 'getAllFarmLand']),
    ...mapMutations('base-overview', ['setBaseInfo', 'setBaseId']),
    handleClickButton () {
      this.setBaseInfo(this.baseList[0])
      this.setBaseId(this.baseList[0].id)
      location.hash = '#/base-overview'
    }
  },
  created () {
    this.getBaseList()
    this.getAllEquipment()
    this.getAllFarmLand()
  }
}
</script>

<style lang="scss">
.base-list {
  height: 100%;
  background-image: url("/public/image/base-list/bg-farmland.jpg");
  background-size: cover;
  .base-name {
    height: 51px;
    font-size: 36px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    line-height: 51px;
    position: absolute;
    left: 73px;
    top: 368px;
  }
  .base-description {
    width: 434px;
    height: 75px;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    line-height: 21px;
    position: absolute;
    left: 73px;
    top: 426.5px;
  }
  .base-other {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    line-height: 20px;
    position: absolute;
    left: 73px;
    top: 523px;
    .info-item {
      display: inline-block;
      margin-right: 27.5px;
    }
  }
  .button-enter-base {
    width: 120px;
    height: 48px;
    background: #fead54;
    border-radius: 8px 8px 8px 8px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    position: absolute;
    left: 73px;
    bottom: 90px;
    cursor: pointer;
  }
}
</style>
